<template>
  <div><a target="_blank" href="https://element-plus.org/zh-CN/component/switch.html">element Switch </a></div>
  <div class="hr das"></div>
  <div>
    <el-switch v-model="value1" />
    <br>
  <el-switch
    v-model="value2"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
 
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ tabsthtm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->

  
</template>
    <script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import { demoProps } from "@/stores/modules/merakDemo";
import dropWrap from "../dropWrap.vue";
import Prism from "prismjs";
import "../prism.css";

const value1 = ref(true)
const value2 = ref(true)
let tabsthtm = ref<string>(`
  <el-switch v-model="value1" />
  <el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
  const value1 = ref(true)
  const value2 = ref(true)   
  `);
 
/* 生命周期 */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
    <style lang="scss" scoped>
</style>